
<template>
  <div class="guide-trade-main" >
    <!-- start 行业信息 -->
    <div class="guide-trade-view guide-main">

      <!-- start 选择行业信息 列表 -->
      <div class="guide-trade-list" v-if="isTradeListShow"> 
        
        <div 
          class="guide-trade-item"
          v-for="(item, index) in tradelistTop" 
          :key="`guide_list_top${index}`" >

          <trade-item
            @event="goGuideDetail"
            :item="item">

          </trade-item>
        </div>
      </div>
      <div class="guide-trade-list guide-trade-list-fot" v-if="isTradeListShow"> 
        <div 
          class="guide-trade-item"
          v-for="(item, index) in tradeListFot" 
          :key="`guide_list_fot${index}`" >

          <trade-item
            @event="goGuideDetail"
            :item="item">

          </trade-item>
        </div>

      </div>
      <!-- end 选择行业信息 列表 -->

      <!-- start 行业详细信息 -->
      <div class="guide-trade-detail" v-else>
        <div class="guide-trade-detail-header">
          <!-- <div class="guide-trade-detail-header-left">
            <span>
              <i class="iconfont" :class="tradeSelect.icon">
              </i>
            </span>
          </div> -->
          <div class="guide-trade-detail-header-right">
            <div class="guide-trade-detail-header-title">
              <span class="guide-trade-detail-header-title-text">
                {{ tradeSelect.text }}
              </span>
              <!-- <span class="guide-trade-detail-afresh-btn" @click="prev">
                重新选择
              </span> -->
            </div>
            <div class="guide-trade-detail-header-subtitle" v-html="tradeSelect.detailHtml">
              
            </div>
          </div>
        </div>

        <!-- start 行业详细信息 功能点列表 -->
        <div class="guide-trade-detail-list">
          <div class="guide-trade-detail-list-item" v-for="(item, index) in tradeSelect.list" :key="`guide_trade_detail_list_item_${index}`">
            <i class="iconfont icon-duihao"></i>
            <span>
              {{ item }}
            </span>
          </div>
        </div>
        <!-- end 行业详细信息 功能点列表 -->
      </div>

      <div v-if="!isTradeListShow" class="guide-trade-detail-company-logo">
        <p>{{ $t('common.trade.text45') }}{{ $t('common.trade.text46') }}</p>
        <img class="allot-detail-img" :src="tradeSelect.companyLogo">
      </div>
      <!-- end 行业详细信息 -->
      
    </div>
    <!-- end 行业信息 -->

    <!-- start 底部按钮 -->
    <div class="guide-view-footer" v-if="isTradeListShow">
      <span class="guide-view-footer-left">
          
      </span>
      <span @click="jump" class="guide-view-footer-right">
        {{ $t('common.trade.text3') }}
        <i class="iconfont icon-right"></i>
      </span>
    </div>
    <div class="guide-view-footer" v-else>
      <base-button type="ghost" @event="prev">{{ $t('common.trade.text4') }}</base-button> 
      <base-button @event="next">{{ $t('common.base.steps.next') }}</base-button>
    </div>
    <!-- end 底部按钮 -->
  </div>
</template>

<script>
import { getOssUrl } from '@src/util/assets'
import TradeItem from './component/TradeItem.vue';

export default {
  name: 'guide-step-one-trade',
  data() {
    return {
      isTradeListShow: true,
      // 行业信息列表
      tradelistTop: [
        {
          icon: getOssUrl('/guide/equipment-select.png'),
          companyLogo: getOssUrl('/guide/equipment-company-logo.png'),
          text: this.$t('common.trade.tradeList.one.text'),
          message: this.$t('common.trade.tradeList.one.message'),
          detailHtml: this.$t('common.trade.tradeList.one.detail'),
          list: this.$t('common.trade.tradeList.one.list'),
        },
        {
          icon: getOssUrl('/guide/smartHardware-select.png'),
          companyLogo: getOssUrl('/guide/smartHardware-company-logo.png'),
          text: this.$t('common.trade.tradeList.two.text'),
          message: this.$t('common.trade.tradeList.two.message'),
          detailHtml: this.$t('common.trade.tradeList.two.detail'),
          list: this.$t('common.trade.tradeList.two.list'),
        },
        {
          icon: getOssUrl('/guide/medicalInstruments-select.png'),
          companyLogo: getOssUrl('/guide/medicalInstruments-company-logo.png'),
          text: this.$t('common.trade.tradeList.three.text'),
          message: this.$t('common.trade.tradeList.three.message'),
          detailHtml: this.$t('common.trade.tradeList.three.detail'),
          list: this.$t('common.trade.tradeList.three.list'),
        }
      ],
      tradeListFot: [
        {
          icon: getOssUrl('/guide/homeAppliances-select.png'),
          companyLogo: getOssUrl('/guide/homeAppliances-company-logo.png'),
          text: this.$t('common.trade.tradeList.four.text'),
          message: this.$t('common.trade.tradeList.four.message'),
          detailHtml: this.$t('common.trade.tradeList.four.detail'),
          list: this.$t('common.trade.tradeList.four.list'),
        },
        {
          icon: getOssUrl('/guide/facilityServices-select.png'),
          companyLogo: getOssUrl('/guide/facilityServices-company-logo.png'),
          text: this.$t('common.trade.tradeList.five.text'),
          message: this.$t('common.trade.tradeList.five.message'),
          detailHtml: this.$t('common.trade.tradeList.five.detail'),
          list: this.$t('common.trade.tradeList.five.list'),
        },
        {
          icon: getOssUrl('/guide/moreIndustries-select.png'),
          companyLogo: getOssUrl('/guide/moreIndustries-company-logo.png'),
          text: this.$t('common.trade.tradeList.six.text'),
          message: this.$t('common.trade.tradeList.six.message'),
          detailHtml: this.$t('common.trade.tradeList.six.detail'),
          list: this.$t('common.trade.tradeList.six.list'),
        },
      ],
      tradeSelect: {}, // 当前选择的行业
    }
  },
  activated() {
    this.isTradeListShow = true;
    this.tradeSelect = {};
  },
  methods: {
    emit(index, { key, value }) {
      this.$emit('next', [index, { key, value}])
    },
    // 跳转行业详情
    goGuideDetail(item) {
      this.tradeSelect = item;
      this.isTradeListShow = false;
      this.$emit('detail', false);
    },
    // 跳过
    jump() {
      this.isTradeListShow = false;
      // this.tradeSelect = this.tradeOther;
      this.emit(1, { key: 'profession', value: this.tradeSelect.text });
      this.$emit('detail', true);
    },
    // 下一步 分配试用资格
    next() {
      this.emit(1, { key: 'profession', value: this.tradeSelect.text });
    },
    // 重新选择， 返回上一步
    prev() {
      this.isTradeListShow = true;
      this.emit(0, { key: 'profession', value: ''});
      this.$emit('detail', true);
    }
  },
  components: {
    [TradeItem.name]: TradeItem
  }
}
</script>

<style lang="scss">
.guide-trade-view {
  .iconfont {
    display: inline-block;
    height: 40px;
    width: 40px;

    font-size: 36px;
    line-height: 40px;
    text-align: center;
  }
  .guide-trade-detail-company-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0; 
    background: #F6FFFE;
    p {
      font-weight: bold;
      margin-bottom: 12px;
    }
    img {
      height: 40px;
    }
  }
}

.guide-trade-list {
  display: flex;
  justify-content: space-between;
  padding: 10px 80px;

  .guide-trade-item {
    color: #fff;

    height: 150px;
    width: 240px;

    .trade-item {
      height: 100%;
      margin: 0 auto;
      padding: 0 10px;

      display: flex;
      justify-content: center;
      // align-items: center;

      border-radius: 5px;

    }

  }

}

.guide-trade-list-fot {
  margin-top: 40px;
}

.guide-trade-detail {
  padding: 10px 80px;
  // min-height: 400px;

  .guide-trade-detail-header {
    display: flex;
    padding-top: 5px;

    .guide-trade-detail-header-left {
      @include fontColor();

      display: flex;
      flex-wrap: wrap;
      justify-content:center;

      flex-wrap: wrap;

      margin-right: 20px;
      width: 40px;
    }

    .guide-trade-detail-header-right {
      // border-bottom: 1px solid #d8d8d8;
      flex: 1;
      padding-bottom: 15px;

      .guide-trade-detail-header-title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        line-height:25px;
        &-text {
          font-size: 16px;
        }
        .guide-trade-detail-afresh-btn {
          @include fontColor();
          cursor: pointer;
        }
        .guide-trade-detail-header-title-text {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 8px;
        }
    
      }
      .guide-trade-detail-header-subtitle {
        color: #595959;
        margin-top: 5px;
        line-height: 20px;
      }
    }

  }

}

.guide-trade-detail-list {
  // padding-left: 60px;
  .guide-trade-detail-list-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    line-height: 20px;
    margin-bottom: 20px;

    i {
      @include fontColor();
      font-size: 20px;
      line-height: 20px;

      height: 20px;
      width: 20px;
    }
    span {
      margin-left: 10px;
    }

  }
}
</style>